バー

棒グラフは、データ値を縦棒で表示する方法を提供します。傾向データを表示したり、複数のデータセットを並べて比較したりするために使用されることがあります。

使用例

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

データセットのプロパティ

棒グラフを使用すると、データセットごとに多数のプロパティを指定できます。 これらは、特定のデータセットの表示プロパティを設定するために使用されます。例えば、 バーの色は通常このように設定されます。

全般的

スタイリング

各バーのスタイルは、次のプロパティで制御できます。

これらすべての値がundefined、関連付けられたものへのフォールバックelements.rectangle.*オプション。

ボーダースキップされました

この設定は、塗りつぶしの基部にバー ストロークが描画されないようにするために使用されます。 一般に、グラフ タイプを作成する場合を除き、これを変更する必要はありません。 棒グラフから派生したものです。

ノート：垂直チャートの負のバーの場合、topとbottom反転されています。同じことが当てはまりますleftとright水平チャートで。

オプションは次のとおりです。

• 'bottom'
• 'left'
• 'top'
• 'right'
• false

境界線の幅

この値が数値の場合、長方形のすべての辺 (左、上、右、下) に適用されます。borderSkipped。この値がオブジェクトの場合、leftプロパティは左側の境界線の幅を定義します。同様に、right、topとbottomプロパティも指定できます。省略された境界線とborderSkippedスキップされます。

インタラクション

各バーとの相互作用は、次のプロパティで制御できます。

これらすべての値がundefined、関連付けられたものへのフォールバックelements.rectangle.*オプション。

データセットの構成

棒グラフは、関連するデータセット オプションから次の構成を受け入れます。

使用例

data: {
    datasets: [{
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        data: [10, 20, 30, 40, 50, 60, 70]
    }]
};

バーの厚さ

この値が数値の場合、各バーの幅にピクセル単位で適用されます。これが施行されると、barPercentageとcategoryPercentage無視されます。

に設定されている場合'flex'の場合、基本サンプル幅は前後のサンプルに基づいて自動的に計算され、重複することなく利用可能な幅全体が取得されます。次に、バーのサイズを次のように設定します。barPercentageとcategoryPercentage。パーセンテージ オプションが 1 の場合、ギャップはありません。このモードでは、データが等間隔でない場合に、異なる幅のバーが生成されます。

設定されていない場合 (デフォルト)、ベースのサンプル幅はバーの重なりを防ぐ最小の間隔を使用して計算され、バーのサイズは以下を使用して決定されます。barPercentageとcategoryPercentage。このモードでは、常に同じサイズのバーが生成されます。

スケール構成

棒グラフは、関連する構成から次の構成に固有のデフォルト値を設定します。scaleオプション:

使用例

options = {
    scales: {
        xAxes: [{
            gridLines: {
                offsetGridLines: true
            }
        }]
    }
};

オフセットグリッドライン

true の場合、特定のデータ ポイントのバーがグリッド線の間に収まります。グリッド線は、グリッド線間のスペースである目盛り間隔の半分だけ左に移動します。 false の場合、グリッド線はバーの中央を真下に移動します。これは、棒グラフのカテゴリ スケールでは true に設定されますが、他のスケールまたはグラフ タイプではデフォルトで false に設定されます。

デフォルトのオプション

作成されたすべての棒グラフに構成設定を適用することが一般的です。グローバル棒グラフ設定は次の場所に保存されます。Chart.defaults.bar。グローバル オプションを変更すると、変更後に作成されたグラフにのみ影響します。既存のチャートは変更されません。

barパーセンテージとカテゴリパーセンテージ

以下に、バーのパーセンテージ オプションとカテゴリのパーセンテージ オプションの関係を示します。

// categoryPercentage: 1.0
// barPercentage: 1.0
Bar:        | 1.0 | 1.0 |
Category:   |    1.0    |
Sample:     |===========|

// categoryPercentage: 1.0
// barPercentage: 0.5
Bar:          |.5|  |.5|
Category:  |      1.0     |
Sample:    |==============|

// categoryPercentage: 0.5
// barPercentage: 1.0
Bar:            |1.||1.|
Category:       |  .5  |
Sample:     |==============|

データ構造

のdata棒グラフのデータセットのプロパティは、数値の配列として指定されます。データ配列内の各点は、x 軸上の同じインデックスのラベルに対応します。

data: [20, 10]

を使用する場合、データセットを X/Y 座標として指定することもできます。タイムスケール。

data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}]

棒グラフのデータセットを 2 つの数値の配列として指定することもできます。これにより、間にギャップのあるバー (フローティングバー) が強制的にレンダリングされます。配列の最初と 2 番目の数値は、それぞれバーの開始点と終了点に対応します。

data: [[5,6], [-3,-6]]

積み上げ棒グラフ

X 軸と Y 軸の設定を変更して積み上げを有効にすることで、棒グラフを積み上げ棒グラフに構成できます。積み上げ棒グラフを使用すると、1 つのデータ系列が多数の小さな部分からどのように構成されているかを示すことができます。

var stackedBar = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});

次のデータセット プロパティは積み上げ棒グラフに固有です。

横棒グラフ

水平棒グラフは、垂直棒グラフのバリエーションです。傾向データを表示したり、複数のデータセットを並べて比較したりするために使用されることがあります。

例

var myBarChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: options
});

設定オプション

横棒グラフの構成オプションは、横棒グラフの構成オプションと同じです。棒グラフ。ただし、棒グラフの x 軸に指定されたオプションはすべて、横棒グラフの y 軸に適用されます。

デフォルトの水平バー構成は次のように指定されます。Chart.defaults.horizontalBar。